<template>
  <!-- 页面布局：使用flex布局，垂直排列 -->
  <div style="display: flex; flex-direction: column; height: 100vh;">
    <!-- 控制面板区域 -->
    <div style="padding: 10px; background: #f5f5f5;">
      <h3>实时定位演示</h3>
      <!-- 定位控制按钮 -->
      <button @click="requestLocationPermission">申请定位权限</button>
      <button @click="startTracking">实时定位（跟踪定位）</button>
      <button @click="stopTracking">停止定位</button>
      <button @click="centerToMyLocation">定位到我的位置（一次性定位,有点慢等一会）</button>
      <!-- 定位状态显示 -->
      <span v-if="tracking" style="color: green; margin-left: 10px;">定位中...</span>
      <!-- 错误信息显示 -->
      <div v-if="positionError" style="color: red; margin-top: 5px;">{{ positionError }}</div>
    </div>
    <!-- 地图容器 -->
    <div id="container" style="flex: 1;"></div>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref, onBeforeUnmount } from 'vue'

// 地图相关变量
let map = null;           // 百度地图实例
let marker = null;        // 位置标记
let tracking = ref(false); // 是否正在跟踪定位状态
let watchId = null;       // 位置监听ID，用于停止监听
let positionError = ref('') // 定位错误信息

// 组件挂载时初始化地图
onMounted(() => {
  initMap();
})

/**
 * 初始化百度地图
 */
function initMap() {
  // 确保DOM元素已经渲染后再初始化地图
  setTimeout(() => {
    try {
      // 检查BMapGL是否存在，确保百度地图API已加载
      if (typeof BMapGL === 'undefined') {
        console.error('BMapGL is not defined');
        positionError.value = '地图加载失败，请检查网络连接或刷新页面重试';
        return;
      }
      
      // 创建地图实例
      map = new BMapGL.Map("container");
      // 设置地图中心点和缩放级别（默认为北京）
      var point = new BMapGL.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      // 启用滚轮缩放
      map.enableScrollWheelZoom(true);
      
      // 初始化位置标记
      marker = new BMapGL.Marker(point);
      map.addOverlay(marker);
      
      console.log('地图初始化成功');
      
      // 页面加载完成后可以自动请求定位权限（注释掉避免自动弹出）
      // requestLocationPermission();
    } catch (error) {
      console.error("地图初始化失败:", error);
      positionError.value = '地图初始化失败: ' + error.message;
    }
  }, 500); // 增加延迟确保API加载完成
}

/**
 * 请求定位权限
 * 通过发起一次性的位置请求来触发浏览器的定位权限弹窗
 */
function requestLocationPermission() {
  // 检查浏览器是否支持地理位置
  if (!navigator.geolocation) {
    positionError.value = '浏览器不支持地理位置服务';
    return;
  }
  
  // 发起一次性的位置请求来触发权限弹窗
  navigator.geolocation.getCurrentPosition(
    position => {
      // 获取位置成功，可以开始跟踪
      console.log('初始位置获取成功');
      startTracking();
    },
    error => {
      // 获取位置失败，仍然可以手动开始跟踪
      console.log('初始位置获取失败:', error);
      positionError.value = '请手动点击"开始定位"按钮';
    },
    {
      enableHighAccuracy: true,  // 高精度定位
      timeout: 10000,            // 超时时间10秒
      maximumAge: 0              // 不使用缓存位置
    }
  );
}

/**
 * 开始定位跟踪
 * 持续监听位置变化并在地图上更新位置标记
 */
function startTracking() {
  // 开始监听位置变化

  watchId = navigator.geolocation.watchPosition(
    position => {
      try {
        // 获取经纬度坐标
        const { latitude, longitude } = position.coords;
        console.log('获取到位置watchPosition:', latitude, longitude);
        
        // 创建百度地图点对象
        const point = new BMapGL.Point(longitude, latitude);
        
        // 更新标记位置
        if (marker) {
          marker.setPosition(point);
        } else {
          // 如果标记不存在，创建一个新的
          marker = new BMapGL.Marker(point);
          if (map) {
            map.addOverlay(marker);
          }
        }
        
        // 将地图中心移动到当前位置
        if (map) {
          map.panTo(point);
        }
        
        // 设置标记弹窗（当前注释掉）
        // const infoWindow = new BMapGL.InfoWindow(`当前位置:<br>纬度: ${latitude.toFixed(6)}<br>经度: ${longitude.toFixed(6)}`);
        // if (marker) {
        //   marker.setInfoWindow(infoWindow);
        // }
      } catch (error) {
        console.error("位置更新失败:", error);
        positionError.value = '位置更新失败: ' + error.message;
      }
    },
    error => {
      // 处理定位错误
      console.error("获取位置失败watchPosition:", error);
      let errorMsg = '';
      switch(error.code) {
        case error.PERMISSION_DENIED:
          errorMsg = "用户拒绝了地理位置请求";
          break;
        case error.POSITION_UNAVAILABLE:
          errorMsg = "位置信息不可用";
          break;
        case error.TIMEOUT:
          errorMsg = "请求超时";
          break;
        default:
          errorMsg = "获取位置时发生未知错误";
          break;
      }
      positionError.value = errorMsg;
      tracking.value = false;
    },
    {
      enableHighAccuracy: true, // 高精度定位
      timeout: 1000,           // 超时时间10秒
      maximumAge: 0             // 不使用缓存位置
    }
  );
  
  // 更新跟踪状态
  tracking.value = true;
}

/**
 * 停止定位跟踪
 * 停止位置监听并重置相关状态
 */
function stopTracking() {
  // 如果未在跟踪状态则直接返回
  if (!tracking.value) return;
  
  // 更新跟踪状态
  tracking.value = false;
  positionError.value = '';
  
  // 停止位置监听
  if (watchId) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
  }
}

/**
 * 定位到我的位置（一次性获取）
 * 获取当前位置并在地图中央显示
 */
function centerToMyLocation() {
  positionError.value = '';
  
  // 检查浏览器是否支持地理位置
  if (!navigator.geolocation) {
    positionError.value = '浏览器不支持地理位置服务';
    return;
  }
  
  // 获取当前位置
  navigator.geolocation.getCurrentPosition(
    position => {
      try {
        // 获取经纬度坐标
        const { latitude, longitude } = position.coords;
        console.log('获取到位置getCurrentPosition:', latitude, longitude);
        
        // 创建百度地图点对象
        const point = new BMapGL.Point(longitude, latitude);
        
        // 更新标记位置
        if (marker) {
          marker.setPosition(point);
        } else {
          // 如果标记不存在，创建一个新的
          marker = new BMapGL.Marker(point);
          if (map) {
            map.addOverlay(marker);
          }
        }
        
        // 将地图中心移动到当前位置并放大
        if (map) {
          // centerAndZoom方法将地图居中到指定点并设置缩放级别
          map.centerAndZoom(point, 17); 
        }
        
        // 设置标记弹窗显示位置信息
        // const infoWindow = new BMapGL.InfoWindow(`当前位置:<br>纬度: ${latitude.toFixed(6)}<br>经度: ${longitude.toFixed(6)}`);
        // if (marker) {
        //   marker.setInfoWindow(infoWindow);
        //   marker.openInfoWindow(infoWindow);
        // }
      } catch (error) {
        console.error("位置定位失败:", error);
        positionError.value = '位置定位失败: ' + error.message;
      }
    },
    error => {
      // 处理定位错误
      console.error("获取位置失败getCurrentPosition:", error);
      let errorMsg = '';
      switch(error.code) {
        case error.PERMISSION_DENIED:
          errorMsg = "用户拒绝了地理位置请求";
          break;
        case error.POSITION_UNAVAILABLE:
          errorMsg = "位置信息不可用";
          break;
        case error.TIMEOUT:
          errorMsg = "请求超时";
          break;
        default:
          errorMsg = "获取位置时发生未知错误";
          break;
      }
      positionError.value = errorMsg;
    },
    {
      enableHighAccuracy: true, // 高精度定位
      timeout: 10000,           // 超时时间10秒
      maximumAge: 0             // 不使用缓存位置
    }
  );
}

/**
 * 组件卸载前的清理工作
 * 停止定位跟踪以避免内存泄漏
 */
onBeforeUnmount(() => {
  stopTracking();
})
</script>

<style scoped lang="less">
// 设置页面基本样式
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

// 地图容器样式
#container {
  width: 100%;
  height: 100%;
}

// 按钮样式
button{
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>